<template>   
    <div id="app">   
      <p>   
        <el-row :gutter="10">   
          <el-col :span="2" style="text-align: center;padding-top: 10px;">   
            <span>持续时间：</span>   
          </el-col>   
          <el-col :span="4">   
            <el-input type="text" v-model.number="duration"  
                 placeholder="请输入持续时间"></el-input>   
          </el-col>   
        </el-row>   
      </p>   
      <p>   
        <el-row :gutter="10">   
          <el-col :span="2" style="text-align: center;padding-top: 10px;">   
            <span>偏移量：</span>   
          </el-col>   
          <el-col :span="4">   
            <el-input type="text" v-model.number="offsetVal" 
                 placeholder="请输入偏移量"></el-input>   
          </el-col>   
        </el-row>   
      </p>   
      <p>   
        <el-row>   
          <el-col :span="2" style="text-align: center;padding-top: 10px;">   
            <span>消息类型：</span>   
          </el-col>   
          <el-col :span="4">   
            <el-select v-model="type" placeholder="请选择倾向性消息类型">   
              <el-option label="成功" value="success"></el-option>   
              <el-option label="警告" value="warning"></el-option>   
              <el-option label="消息" value="info"></el-option>   
              <el-option label="错误" value="error"></el-option>   
            </el-select>   
          </el-col>   
        </el-row>   
      </p>   
      <p>   
        <el-row>   
          <el-col :span="2" style="text-align: center;padding-top: 10px;">
            <span>弹出位置：</span>   
          </el-col>   
          <el-col :span="4">   
            <el-select v-model="position" placeholder="请选择弹出位置">   
              <el-option label="右上角" value="top-right"></el-option>   
              <el-option label="右下角" value="bottom-right"></el-option>   
              <el-option label="左下角" value="bottom-left"></el-option>   
              <el-option label="左上角" value="top-left"></el-option>   
            </el-select>   
          </el-col>   
        </el-row>   
      </p>   
      <p>   
        <el-row>   
          <el-col :span="2">   
            <el-button type="primary" @click="openNotify">基本使用</el-button>   
          </el-col>   
        </el-row>   
      </p>   
    </div>   
  </template>   
  <script>   
    export default {   
      name: 'App',   
      data() {   
        return {   
          offsetVal: 0,  // 控制偏移位置 
          position : 'top-right',  // 控制显示位置 
          duration: 2000,  // 控制显示时长，单位ms，0表示不关闭 
          type: 'success',  // 显示信息的倾向性 
        }   
      },   
      methods: {   
        openNotify() {   
          this.$notify({   
            title: '标题',   
            message: '内容',   
            offset: this.offsetVal,   
            type: this.type,   
            duration: this.duration,   
            position : this.position   
          })   
        },   
      },
    }   
  </script>   
  <style></style> 